<template>
    <!--面包屑+标签页-->
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item class="myColor" :to="{ path: '/' }">电气概况</el-breadcrumb-item>
            <el-breadcrumb-item class="myColor">设备详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs style="margin-top: 5px" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="设备信息" name="first">
                <template #label>
                        <span><i class="el-icon-s-grid"></i>设备信息</span>
                </template>

            </el-tab-pane>
            <el-tab-pane label="线路列表" name="second">
                <template #label>
                    <span><i class="el-icon-s-grid"></i>线路列表</span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="指令反馈" name="third">
                <template #label>
                    <span><i class="el-icon-s-grid"></i>指令反馈</span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="配备详情" name="fourth">
                <template #label>
                    <span><i class="el-icon-s-grid"></i>配备详情</span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="报警联系人" name="fifth">
                <template #label>
                    <span><i class="el-icon-s-grid"></i>报警联系人</span>
                </template>
            </el-tab-pane>
            <el-tab-pane label="报警记录" name="sixth">
                <template #label>
                    <span><i class="el-icon-s-grid"></i>报警记录</span>
                </template>
            </el-tab-pane>
        </el-tabs>
        <!--主体-->
        <div class="left-bar">
                <div class="left-top-bar">
                    <dv-border-box-11 title="设备详情">
                        <el-image
                                style="width: 100px; height: 100px;margin-top: 10vh;left: 38%"
                                :src="url"
                                :preview-src-list="srcList">
                        </el-image>
                        <div style="height:100%;width: 90%;margin-left:5%">
                            <el-descriptions direction="horizontal" :column="1" border>
                                <el-descriptions-item label-class-name="my-label-singular" content-class-name="my-content-singular" label="设备号">98cc4d3037be</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-content-plural" label="在线状态">在线</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-singular" content-class-name="my-content-singular" label="设备别名">消防主机</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-content-plural" label="站点地址">朔城区鄯阳街3号如家快捷酒店(朔州市区政府店)</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-singular" content-class-name="my-content-singular" label="详细地址">鄯阳街支行</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-content-plural" label="型号">A5-c</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-singular" content-class-name="my-content-singular" label="卡信息"></el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-content-plural" label="注册时间">2022-07-28 15:04:35</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </dv-border-box-11>
                </div>
                <div class="left-under-bar">
                    <dv-border-box-11 title="定位信息">

                    </dv-border-box-11>
                </div>
        </div>
        <div class="right-bar">
            <div class="right-top-bar">
                <dv-border-box-11 title="参数信息">
                    <div style="display: flex">
                    <div class="one">
                        <div class="one-one">
                            <span><i class="el-icon-connection" style="color:#02A2CB;font-size:80px;"></i></span>
                        </div>
                        <div class="one-two">
                            <div style="float: top;height: 7vh;color: white"><i style="margin-left: 40px">线路数</i></div>
                            <div style="float: bottom ;height: 7vh;color:white ;"><i style="margin-left: 55px;margin-top: 15px">0</i></div>
                        </div>
                        <div class="one-three">
                            <span><i class="el-icon-chat-dot-square" style="color:#E64758;font-size:80px;"></i></span>
                        </div>
                    </div>
                    <div class="two">
                        <div class="two-one">
                            <div style="float: top;height: 7vh;color: white"><i style="margin-left: 40px">维护次数</i></div>
                            <div style="float: bottom ;height: 7vh;color:white ;"><i style="margin-left: 55px;margin-top: 15px">0</i></div>
                        </div>
                        <div class="two-two">
                            <span><i class="el-icon-guide" style="color:#F4AD04;font-size:80px;"></i></span>
                        </div>
                        <div class="two-three">
                            <div style="float: top;height: 7vh;color: white"><i style="margin-left: 40px">报警总数</i></div>
                            <div style="float: bottom ;height: 7vh;color:white ;"><i style="margin-left: 55px;margin-top: 15px">-- --</i></div>
                        </div>
                    </div>
                    </div>
                    <div class="button-operate-class">
                        <el-button style="margin-left: 35px" type="primary" :plain="true" @click="open1"><i class="el-icon-edit"></i>远程消音</el-button>
                        <el-button type="primary" :plain="true" @click="open1"><i class="el-icon-share"></i>远程复位</el-button>
                        <el-button type="primary" :plain="true" @click="open1"><i class="el-icon-share"></i>远程脱扣</el-button>
                    </div>
                    <div class="container">
                        <p style="color:#fff;margin-left: 40px;font-size: small " v-bind:interval="1000">更新时间：{{ currentTime }}</p>
                        <el-select style="margin-left: 5px" size="small" v-model="value" placeholder="主路">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <p style="color:#fff;margin-top:10px;margin-left: 5px;font-size:small">状态:</p>
                        <el-tag style="margin-top: 5px;margin-left:5px;" type="success" size="small" hit="true" color="#242E66">在线</el-tag>
                        <el-tag @click="open2" style="margin-top: 5px;margin-left:5px;" effect="plain" size="small" hit="true" color="#242E66">刷新数据</el-tag>
                    </div>
                    <div style="height:42vh;width: 100%">
                        <div style="height: 40vh;width: 90%;margin-left: 5%;">
                            <div style="float: top;height: 10vh">
                                <div style="display:flex;width: 50%;height: 10vh;float: left">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">0.0</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">功率因数</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">0.0W</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">功率</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">235V</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相电压</div>
                                    </div>
                                </div>
                                <div style="display:flex;width: 50%;height: 10vh;float: right">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相电压状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">B相电压状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">C相电压状态</div>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top:10px;height:10vh">
                                <div style="display:flex;width: 50%;height: 10vh;float: left">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">14.1mA</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">漏电电流</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">漏电状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">0.0A</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相电流</div>
                                    </div>
                                </div>
                                <div style="display:flex;width: 50%;height: 10vh;float: right">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相电流状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">B相电流状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">C相电流状态</div>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top:10px;height:10vh">
                                <div style="display:flex;width: 50%;height: 10vh;float: left">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">18.4℃</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相温度</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A相温度状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">B相温度状态</div>
                                    </div>
                                </div>
                                <div style="display:flex;width: 50%;height: 10vh;float: right">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">N相温度状态</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">18.0℃</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">D相温度</div>
                                    </div>
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">正常</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">D相温度状态</div>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top:10px;height:10vh">
                                <div style="display:flex;width: 50%;height: 10vh;float: left">
                                    <div style="height: 10vh;width:33%">
                                        <div style="float: top;height: 3.3vh;width: 100%;text-align:center;color:#00FFFF">0.0W</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff">——</div>
                                        <div style="height: 3.3vh;width: 100%;text-align:center;color:#fff;font-size: small">A有功功率</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-11>
            </div>
            <div class="right-middle-bar">
                <dv-border-box-11 title="数据曲线">
                    <div style="height:10vh;width:90%;margin-left:5%;"></div>
                    <div style="height:80vh;width:90%;margin-left:5%;">
                        <div class="block">
                            <el-date-picker
                                    v-model="value2"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-button type="primary" style="margin-left: 10px" @click="open3">导出数据</el-button>
                        </div>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="电流" name="first"></el-tab-pane>
                            <el-tab-pane label="电压" name="second"></el-tab-pane>
                            <el-tab-pane label="漏电" name="third"></el-tab-pane>
                            <el-tab-pane label="温度" name="fourth"></el-tab-pane>
                            <el-tab-pane label="功率因数" name="fifth"></el-tab-pane>
                            <el-tab-pane label="有功功率" name="sixth"></el-tab-pane>
                        </el-tabs>
                        <div id="line" style="height: 60vh;width: 100%;color:#fff"></div>
                    </div>
                </dv-border-box-11>
            </div>
            <div class="right-under-bar">
                <div class="right-under-left-bar">
                    <dv-border-box-11 title="分层图">
                        <el-empty style="padding: 90px 0;" :image-size="100" description="暂无分层图"></el-empty>
                    </dv-border-box-11>
                </div>
                <div class="right-under-right-bar">
                    <dv-border-box-11 title="视频联动">
                        <el-empty style="padding: 90px 0;" :image-size="100" description="暂无视频联动"></el-empty>
                    </dv-border-box-11>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    const option = {
        title: {
            text: '设备数据曲线图',
            textStyle:{
                color:'#00FFFF'
            }
        },
        legend: {
            data: ['A相电流', 'B相电流', 'C相电流'],
            textStyle:{
                color:'#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel:{
                color:'#fff'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                color:'#fff'
            }
        },
        series: [
            {
                name:'A相电流',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }, {
                name:'B相电流',
                data: [325, 654, 762, 824, 162, 634, 952],
                type: 'line',
                smooth: true
            },{
                name:'C相电流',
                data: [352, 495, 524, 752, 821, 1058, 1158],
                type: 'line',
                smooth: true
            }
        ]
    };
    export default {
        name: "Des1",
        data() {
            return {
                chrat:'',
                opinionData: ["155", "400", "900", "800", "300", "900", "270"],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                currentTime: new Date(),
                options1: [{
                    value: '选项1',
                    label: '主路',
                }],

                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''
            }
        },
        created() {
            setInterval(() => {
                this.currentTime = new Date()
            }, 1000)
        },
        mounted() {
            let lineDom = document.getElementById('line');
            let lineChart = echarts.init(lineDom);
            lineChart.setOption(option);
        },
        methods:{
            open1() {
                this.$message({
                    showClose: true,
                    message: '命令已提交',
                    type: 'success'
                });
            },
            open2() {
                this.$message({
                    showClose: true,
                    message: '已请求刷新数据',
                    type: 'success'
                });
            },
            open3() {
                this.$confirm('此操作将下载该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '下载成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下载'
                    });
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
        }
    }
</script>

<style scoped>
    .myColor /deep/ .el-breadcrumb__inner {
        color: #fff;}
    .el-tabs{
        color: white;
    }
    ::v-deep .el-tabs__item {
        color: white;
    }
    ::v-deep .el-tabs__active-bar {
        background-color: #15cbf3;
    }
    ::v-deep .el-tabs__item.is-active {
        color: #15cbf3;
    }
    .left-bar {
        float: left;
        width: 30%;
        height: 200vh;
    }
    .left-top-bar {
         height: 90vh;
     }
    .left-under-bar {
        height: 50vh;
    }
    .right-bar {
        margin-left: 31%;
        width: 66%;
    }
    .right-top-bar{
        height: 85vh;
    }
    .right-middle-bar{
        height: 80vh;
    }
    .right-under-bar{
        height: 40vh;
    }
    .right-under-left-bar{
        float: left;
        width: 50%;
        height: 40vh;
    }
    .right-under-right-bar{
        float: right;
        width: 50%;
        height: 40vh;
    }
    .one{
        flex: 1;
        margin-top: 80px;
        height: 10%;
        width: 50%;
    }
    .two{
        flex: 1;
        margin-top: 80px;
    }
    .one-one{
        float: left;
        height: 15vh;
        width: 33%;
    }
    .one-two{
        height: 15vh;
        width: 33%;
        margin-left: 33%;
    }
    .one-three{
        height: 15vh;
        width: 33% !important;
        margin-left: 66% !important;
        margin-top: -15vh;
    }
    .two-one{
        float: right;
        height: 15vh;
        width: 33%;
    }
    .two-two{
        height: 15vh;
        width: 33%;
        margin-left: 33%;
    }
    .two-three{
        height: 15vh;
        width: 33% !important;
        margin-right: 66% !important;
        margin-top: -15vh;
    }
    .el-icon-connection{
        margin-left: 40px;
    }
    .el-icon-guide{
        margin-left: 30px;
    }
    .el-icon-chat-dot-square{
        margin-left: 30px;
    }
    .container{
        display:flex;
    }
    ::v-deep .my-label-singular {
        background: #384176 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
    ::v-deep .my-content-singular {
        background: #384176 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
    ::v-deep .my-label-plural {
        background: #242E66 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
    ::v-deep .my-content-plural {
        background: #242E66 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
</style>